<template>
  <div class="console">
    <!-- 头部 -->
    <div class="console-head m-b-16">
      <div><img src="@imgs/common/logo-text.png" style="height: 60px" /></div>
      <div class="HuaWenXinWei-text console-head-right text-primary">研究有“法”味的法律英语</div>
    </div>
    <!-- 内容部分 -->
    <div class="console-content">
      <div class="console-row-text m-b-32 font-size-24">
        <div>尊敬的会员【</div>
        <div class="text-underline">{{ userInfo.username }}</div>
        <div>】</div>
      </div>
      <div class="console-row-text font-size-24 m-b-16">
        <div>欢迎使用</div>
        <div class="text-primary font-bold">{{ AppConfig.systemInfo.name }}！</div>
      </div>
      <div class="console-row-text font-size-24 m-b-16 font-bold">
        <div>Welcome to&nbsp;</div>
        <div class="text-primary">
          Leo's Integrated E-Exereises Platform for Legal Translators！</div
        >
      </div>
      <div class="console-row-text font-size-24 m-b-16">
        <div>今天是您成为本系统会员的第&nbsp;</div>
        <div class="font-bold text-underline">110</div>
        <div>&nbsp;天，已共计练学&nbsp;</div>
        <div class="font-bold text-underline">205</div>
        <div>&nbsp;题，请继续加油哦~</div>
      </div>
      <div class="console-select">
        <div class="m-b-32">请先选择您要进入的练学模式：</div>
        <div class="console-row-text font-size-16">
          <el-space :size="20">
            <div class="console-row-text">
              <div>【</div>
              <div class="text-underline text-pointer">练学同步模式</div>
              <div>】</div>
            </div>
            <div class="console-row-text">
              <div>【</div>
              <div class="text-underline text-pointer">盲练模式</div>
              <div>】</div>
            </div>
            <div class="console-row-text">
              <div>【</div>
              <div class="text-underline text-pointer">收藏复习模式</div>
              <div>】</div>
            </div>
          </el-space>
        </div>
      </div>
      <div class="console-rights">
        <div>本系统所依托之软件及其内载数据资料之版权均属**公司所有，侵权必究！</div>
        <div
          >All rights related to this Software and all data and information contained therein are
          reserved by ** Company.</div
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useCommon } from '@/composables/useCommon'
  import { useUserStore } from '@/store/modules/user'
  import AppConfig from '@/config'
  defineOptions({ name: 'Console' })
  const userStore = useUserStore()
  const { getUserInfo: userInfo } = storeToRefs(userStore)
  useCommon().scrollToTop()
</script>

<style lang="scss" scoped>
  .console {
    display: flex;
    flex-direction: column;
    &-head {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      &-right {
        font-size: 32px;
        font-style: italic;
      }
    }

    &-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    &-row-text {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    &-select {
      flex: 1;
      border: 1px solid #9a9cae;
      width: 97%;
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    &-rights {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: right;
      align-items: end;
      color: rgb(87, 37, 125);
    }
  }
</style>
